<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合式api用户列表</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .container {
            margin: 50px;
        }

        .content {
            margin: 20px;
        }
    </style>
  </head>
  <body>
    <div id="Application">
        
    </div>
  </body>

  <script>
    let mock = [{
        name:"小王",
        sex:0
    },{
        name:"小红",
        sex:1
    },{
        name:"小李",
        sex:1
    },{
        name:"小张",
        sex:0
    }]
    const App=Vue.createApp({
        setup(){
            const showDatas = Vue.ref([])
            const queryAllData= ()=>{
                setTimeout(()=>{
                    showDatas.value = mock
                }, 3000)
            }
        
            Vue.onMounted(queryAllData)
            let sexFilter = Vue.ref(-1)
            let searchKey = Vue.ref("")
            let filterData = ()=>{
                searchKey.value = ""
                if(sexFilter.value == -1){
                    showDatas.value = mock
                }else{
                    showDatas.value = mock.filter((data)=>{
                        return data.sex == sexFilter.value
                    })
                }
            }
            let searchData = ()=>{
                sexFilter.value = -1
                if(searchKey.value.length == 0){
                    showDatas.value = mock
                }else{
                    showDatas.value = mock.filter((data)=>{
                        return data.name.search(searchKey.value) != -1
                    })
                }
            }

            Vue.watch(sexFilter, filterData)
            Vue.watch(searchKey, searchData)

            return{
                showDatas,
                searchKey,
                sexFilter
            }
        },
        template: `
        <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFilter" />全部
                <input type="radio" :value="0" v-model="sexFilter" />男
                <input type="radio" :value="1" v-model="sexFilter" />女
                
            </div>
            <div class="content">
                搜索: <input type="text" v-model="searchKey" />
            </div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr v-for="(data, index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex==0?'男':'女'}}</td>
                    </tr>
                </table>
            </div>
        </div>
        `
    })
    App.mount("#Application")
  </script>
</html>